<template>
  <view class="padding-bottom-button tui-skeleton">
    <l-background />
    <view class="padding-lr-30">
      <template v-if="list.length">
        <view v-for="(item,index) in list" :key="index" class="card margin-top-30 padding-lr-30 padding-bottom-30" @click="jump('/vehicle/repair-details/repair-details?id='+ item.id)">
          <view class="padding-tb-18 flex-row justify-between align-center border-bottom">
            <text class="text-24 color-t3">{{ item.startDate }} 至 {{ item.endDate }}</text>
            <l-tag plain border-width="0" :text="showStatus(item.status).label" :type="showStatus(item.status).type" />
          </view>
          <view class="margin-top-30 flex-column">
            <text class="text-32 color-t1 text-bold">{{ item.repairContent }}</text>
            <text class="text-24 color-t1 margin-tb-16">维修厂：{{ item.repairAddress }}</text>
            <text class="text-24 color-t1">总维修费用：￥{{ item.repairFee }}</text>
          </view>
          <view v-if="item.status === 2" class="margin-top-30 flex-row align-center justify-end">
            <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="28" plain type="gray" @click="edit(item)">编辑</tui-button>
            <view class="margin-left-16">
              <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="28" plain type="gray" @click="showModal(item, 0)">取消维修</tui-button>
            </view>
            <view class="margin-left-16">
              <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="showModal(item, 4)">结束维修</tui-button>
            </view>
          </view>
		  <view v-if="item.status === 4" class="margin-top-30 flex-row align-center justify-end">
		    <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="28" plain type="gray" @click="edit(item)">编辑</tui-button>
		  </view>
        </view>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
        <l-no-data v-else type="repair" text="车辆暂无维修计划" />
      </template>
    </view>

    <tui-modal :show.sync="show" title="提示" :content="content" @click="modalClick" />

    <safe-area-bottom />
    <l-bottom-button text="添加计划" @click="jump('/vehicle/add-maintenance-plan/add-maintenance-plan?vehicleId='+id)" />
  </view>
</template>

<script>
import { getRepair, editRepair,  editRepairState} from '../api'
import { preloadData } from './index'
export default {
  name: 'MaintenancePlan',
  data() {
    return {
      preloadData,
      id: '',
      list: [],
      page: 1,
      limit: 20,
      hasMore: true,
      showSkeleton: true,
      show: false,
      content: '',
      modalType: 0,
      item: {}
    }
  },
  computed: {
    showStatus() {
      return (status) => {
        switch (status) {
          case 0:
            return { label: '已取消', type: 'secondary' }
          case 2:
            return { label: '维修中', type: 'success' }
          case 4:
            return { label: '已结束', type: 'secondary' }
        }
      }
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getList()
  },
  onShow() {
    this.reload()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    // 获取列表
    async getList() {
      const [err, res] = await getRepair({
        vehicleId: this.id,
        current: this.page,
        limit: this.limit
      })
      uni.stopPullDownRefresh()
      this.showSkeleton = false
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.limit) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    // 刷新
    reload() {
      this.hasMore = true
      this.page = 1
      this.getList()
    },
    // 下一页
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    // 编辑
    edit(item) {
      const obj = JSON.stringify(item)
      this.jump('/vehicle/add-maintenance-plan/add-maintenance-plan?item=' + obj)
    },
    // 显示弹窗
    showModal(item, type) {
      this.modalType = type
      this.content = type ? '是否确定结束该维修计划？' : '是否确定取消该维修计划？'
      this.show = true
      this.item = item
    },
    // 弹窗点击
    modalClick(e) {
      this.show = false
      if (e.index) {
        this.editRepairState()
      }
    },
    // 取消/结束维修
    async editRepairState() {
      const send = this.copyData(this.item)
      send.status = this.modalType
      const [err, res] = await editRepairState(send)
      if (!this.$http.errorCheck(err, res)) return false
      this.toast(this.modalType ? '已结束' : '取消成功')
      this.reload()
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(tb,18);

.card{
  border:2rpx solid $color-border;
  border-radius:20rpx;
}
.border-bottom{
  border-bottom:2rpx solid $color-border;
}
</style>
